<template>
    <el-dialog :visible.sync="isShow" title="商品详情" width="1000px">
        <el-form ref="form" :rules="rules" label-position="left">
            <el-row style="display: flex;flex-direction: row;flex-wrap: wrap;">
              <el-col :span="12">
                <el-form-item label="平台类目：">
                  {{itemModel.cateModel?itemModel.cateModel.name:''}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商品名称：">
                  {{itemModel.name}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="在售状态：">
                  {{itemModel.status==1?'在售':'下架'}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="创建时间：">
                  {{getfrmTime(itemModel.createTime)}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="审核状态：">
                  {{checkStatusDict[itemModel.checkStatus]}}
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="展示图：">
                  <div style="display: flex;flex-direction: row;flex-wrap: wrap;align-items: flex-start;">
                    <el-image style="width: 200px;margin-right: 6px;margin-bottom: 6px;" fit="contain" :src="item.coverUrl" v-for="(item, index) in itemModel.coverPhotoList" :key="index"></el-image>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="规格：">
                  <div>
                    <el-table :data="itemModel.skuList" size='medium' style="margin-top:20px" border>
                      <el-table-column prop="specValuesText" label="规格" show-overflow-tooltip width="150px">
                      </el-table-column>
                      <el-table-column prop="cover" label="sku图片" show-overflow-tooltip align="center" width="200px">
                          <template slot-scope="{ index, row }">
                            <el-image style="width: 200px;margin-right: 6px;margin-bottom: 6px;" fit="contain" :src="row.coverUrl" ></el-image>
                          </template>
                      </el-table-column>
                      <el-table-column prop="stock" label="库存(必填)" show-overflow-tooltip align="center" width="150px">
                          <template slot-scope="{ index, row }">
                              {{ row.stock }}
                          </template>
                      </el-table-column>
                      <el-table-column prop="costPrice" label="成本价(必填)" show-overflow-tooltip align="center" width="180px">
                      </el-table-column>
                      <el-table-column prop="sellingPrice" label="零售价(必填)" show-overflow-tooltip align="center" width="180px">
                      </el-table-column>
                    </el-table>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="详情：">
                  <div v-html="itemModel.detailPhotosRichText"></div>
                </el-form-item>
              </el-col>
            </el-row>
        </el-form>
      
      <div style="display: flex;flex-direction: row;justify-content: flex-end;" v-if="$store.getters.userModel.role=='admin' || $store.getters.userModel.role=='superAdmin'">
        <el-button type="primary" @click="passAction">审核通过</el-button>
        <el-button type="info" @click="refuseAction">审核拒绝</el-button>
      </div>
    </el-dialog>
  </template>
  
  <script>
    import {getItemInfo} from '@/api/merchant/item.js'
    import {time} from '@/utils/time.js'
    import { request_post } from '@/api/common.js'
  export default {
    components: {},
    data() {
      return {
          isShow: false,
          row: {},
          itemModel: {},
          rules: {
            record: [{ required: true, message: '请输入', trigger: 'blur' }]
        },
        checkStatusDict: {
          PASS: '审核通过',
          CHECKING: '审核中',
          REFUSE: '审核拒绝'
        }
      }
    },
    methods:{
      show(){
        this.isShow = true
        this.getItemDetail()
      },
      close(){
          this.isShow = false
      },
      passAction(){
        request_post('/merchant/item/passItem/', {
          itemId: this.itemModel.id
        }).then(res=>{
          if(res.data.code == 10000){
            this.isShow = false
            this.$emit('confirm')
            this.$message({
                message: '审核通过',
                type: 'success'
              })
          }
        })
      },
      refuseAction(){
        request_post('/merchant/item/refuseItem/', {
          itemId: this.itemModel.id
        }).then(res=>{
          if(res.data.code == 10000){
            this.isShow = false
            this.$emit('confirm')
            this.$message({
                message: '审核拒绝',
                type: 'success'
              })
          }
        })
      },
      getItemDetail(){
        getItemInfo({
          itemId: this.row.id,
          }).then(res=>{
              if(res.data.code == 10000){
                  this.itemModel = res.data.data
              }
          })
      },
      getfrmTime(data){
        return data?time.dateFormat('YY-mm-dd HH:MM:SS', data):'未知'
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .bottom{
      margin-top: 60px;
      display: flex;
      flex-direction: row;
      justify-content: center;
  }
  </style>
  